<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="animate.css">
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>

<style>
    p{
        width: 180px;
        height: 180px;
        /*opacity: 0;*/
        background: red;
        margin: 0 auto;
    }
</style>

<script>
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                show:'',
                list:['apple','banana','orange','pear']
            },
            computed:{
                lists:function(){
                    var arr=[];
                    this.list.forEach(function(val){
                        if(val.indexOf(this.show)!=-1){
                            arr.push(val);
                        }
                    }.bind(this));
                    return arr;
                }
            }
        });
    };
</script>
</head>
<body>
<div id="box">
    <input type="text" v-model="show">

    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
        <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
            {{val}}
        </p>
    </transition-group>
</div>
</body>
</html>